<template>
	<view class="all-goods">
		<view class="title">
			<text>全部商品</text>
			<text class="iconfont1 icon-guanbi1 close" @click="$emit('closePop')"></text>
		</view>
		<view class="content">
			<view class="des">
				<view class="des-item" v-for="(item,index) in list" :key="index">
					<image class="icon" :src="item.icon" mode="widthFix"></image>
					<text
						:class="['name',{'max':item.level_id==1},{'special':item.level_id==2},{'hide':item.level_id==3},{'pt':item.level_id==4}]">{{item.box_level}}</text>
					<text class="rate">概率{{item.rate}}</text>
				</view>
			</view>
			<view class="good-list">
				<Good class="good" v-for="(item,index) in goodList" :key="index" :value="item" v-on="$listeners">
				</Good>
			</view>
		</view>

	</view>
</template>

<script>
	import Good from "./Good.vue";
	export default {
		props: {
			rateList: {
				type: Array,
				default: []
			},
			goodList: {
				type: Array,
				default: []
			}
		},
		components: {
			Good
		},
		computed: {
			list() {
				let list = this.rateList.map(item => {
					switch (item.level_id) {
						case 4:
							item.icon = require('@/static/image/pt1.png');
							break;
						case 3:
							item.icon = require('@/static/image/hide1.png');
							break;
						case 2:
							item.icon = require('@/static/image/special1.png');
							break;
						case 1:
							item.icon = require('@/static/image/max1.png');
							break;
						default:
							item.icon = require('@/static/image/pt1.png');
							break;
					}
					return item;
				})
				return list;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.all-goods {
		width: 100%;
		border-top-left-radius: 45rpx;
		border-top-right-radius: 45rpx;

		.title {
			font-size: 35rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #111111;
			position: relative;
			height: 85rpx;
			line-height: 85rpx;
			text-align: center;

			.close {
				position: absolute;
				top: 21rpx;
				right: 47rpx;
				line-height: initial;
				font-size: 40rpx;
			}
		}

		.content {
			padding: 17rpx 14rpx;
			box-sizing: border-box;
			height: 1100rpx;
			overflow-y: scroll;
			background: #F6F6F6;

			.des {
				display: flex;
				justify-content: space-around;
				background: #fff;
				width: 722rpx;
				height: 213rpx;
				border-radius: 30rpx;

				.des-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-top: 40rpx;

					.icon {
						width: 63rpx;
						height: 67rpx;
						display: block;
						margin-right: 12rpx;
					}

					.name {
						font-size: 25rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;

						&.max {
							color: #FF5271;
						}

						&.special {
							color: #FFB900;
						}

						&.hide {
							color: #9359FF;
						}

						&.pt {
							color: #4EBEFF;
						}
					}

					.rate {
						font-size: 21rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
					}
				}
			}

			.good-list {
				margin-top: 22rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				// align-content: baseline;
				.good {
					margin: 0 8rpx 17rpx 8rpx;
				}
			}
		}

	}
</style>
